<template>
  <div>
    <el-dialog :title="title" :visible.sync="visible" width="1080px">
      <el-row class="flex justify-end">
        <el-button
          type="primary"
          size="small"
          icon="el-icon-plus"
          @click="handleAdd"
          >{{ $i18n.t("mind.addALink") }}</el-button
        >
      </el-row>
      <el-row class="mt-16">
        <el-table v-loading="loading" :data="tableData" height="420px">
          <el-table-column :label="$i18n.t('mind.shortLink')" width="480">
            <template slot-scope="{ row }">
              <div class="py-8">
                <p>
                  链接：<span
                    class="color-3D82EA pointer"
                    @click="jump(row.shortLink)"
                    >{{ row.shortLink }}</span
                  >
                </p>
                <p v-if="row.validType !== '0'">
                  提取码：{{ row.extractedCode }}
                </p>
              </div>
            </template>
          </el-table-column>
          <el-table-column :label="$i18n.t('mind.verificationMethod')" prop="validType" align="center">
            <template slot-scope="{ row }">
              <span>{{ row.validType === "0" ? "无" : "口令" }}</span>
            </template>
          </el-table-column>
          <el-table-column
            :label="$i18n.t('mind.deadline')"
            prop="dueDate"
            align="center"
            width="180"
          >
            <template slot-scope="{ row }">
              <span>{{ row.dueDate || "永久" }}</span>
            </template>
          </el-table-column>
          <el-table-column :label="$i18n.t('mind.operation')" align="center" width="250">
            <template slot-scope="{ row }">
              <el-tooltip
                :content="$i18n.t('mind.copyMsg')"
                v-model="row.copySuccess"
                placement="top"
                manual
                effect="light"
              >
                <el-button
                  type="primary"
                  size="small"
                  plain
                  @click="handleCopy(row)"
                  >{{ $i18n.t("mind.copyLink") }}</el-button
                >
              </el-tooltip>
              <el-button
                type="success"
                size="small"
                plain
                @click="handleEdit(row)"
                >{{ $i18n.t("mind.edit") }}</el-button
              >
              <el-popover placement="top" width="160" v-model="row.delVisible">
                <p>删除分享链接，是否继续？</p>
                <div style="text-align: right; margin: 0">
                  <el-button
                    size="mini"
                    type="text"
                    @click="row.delVisible = false"
                    >{{ $i18n.t("mind.cancel") }}</el-button
                  >
                  <el-button
                    type="primary"
                    size="mini"
                    :loading="delLoading"
                    @click="handleDel(row)"
                    >{{ $i18n.t("mind.delete") }}</el-button
                  >
                </div>
                <el-button
                  type="danger"
                  size="small"
                  plain
                  slot="reference"
                  class="ml-12"
                  >{{ $i18n.t("mind.delete") }}</el-button
                >
              </el-popover>
            </template>
          </el-table-column>
        </el-table>
        <el-row style="height: 48px">
          <pagination
            drawer-bottom-no-footer
            v-show="total > 0"
            :total="total"
            :page.sync="params.pageNum"
            :limit.sync="params.pageSize"
            @pagination="getList"
          />
        </el-row>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" size="small" @click="handleClose"
          >关 闭</el-button
        >
      </div>
    </el-dialog>

    <!-- 新增、编辑 -->
    <el-dialog
      :title="addEditTitle"
      :visible.sync="addEditVisible"
      width="780px"
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="98px">
        <el-row>
          <el-form-item label="截止时间：" prop="dueDate">
            <el-date-picker
              v-model="form.dueDate"
              type="datetime"
              :pickerOptions="pickerOptions"
              :placeholder="$i18n.t('mind.selectTheDeadline')"
              value-format="yyyy-MM-dd HH:mm:ss"
              default-time="17:30:00"
              class="input-radius-0"
            ></el-date-picker>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="认证方式：" prop="validType">
            <el-radio-group v-model="form.validType">
              <el-radio label="0">{{ $i18n.t("mind.none") }}</el-radio>
              <el-radio label="1">{{ $i18n.t("mind.password") }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="handleAddEditCancel">{{ $i18n.t("mind.cancel") }}</el-button>
        <el-button
          type="primary"
          size="small"
          :loading="saveLoading"
          @click="handleAddEditave"
          >保 存</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import * as API from "@/api/tool/share"; // API
import { copyToClip } from "@/utils/index.js";
import moment from "moment";

export default {
  name: "Share", // 分享
  props: {
    open: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: "分享链接列表",
    },
    paramsData: {
      type: Object,
      default: () => {},
    },
    listParams: {
      type: String,
      default: "",
    },
  },
  computed: {
    visible: {
      get() {
        return this.open;
      },
      set(val) {
        this.$emit("update:open", val);
      },
    },
    pickerOptions() {
      return {
        disabledDate(time) {
          return (
            time.getTime() <
            new Date(moment().format("YYYY-MM-DD 00:00:00")).getTime()
          );
        },
      };
    },
  },
  created() {
    // this.getList()
  },
  watch: {
    open(val) {
      if (val) {
        this.total = 0;
        this.tableData = [];
        this.refresh();
      }
    },
  },
  data() {
    return {
      // 列表
      loading: false,
      total: 1,
      params: {
        pageNum: 1,
        pageSize: 10,
      },
      tableData: [],
      // 新增、编辑
      addEditTitle: "",
      addEditVisible: false,
      form: {},
      rules: {},
      saveLoading: false,
      // 删除
      delLoading: false,
    };
  },
  methods: {
    refresh() {
      this.params[this.listParams] = this.paramsData[this.listParams];
      this.params.pageNum = 1;
      this.getList();
    },
    getList() {
      this.loading = true;
      API.list(this.params)
        .then((res) => {
          const { records, total } = res.data.result;
          this.tableData = records || [];
          this.tableData.forEach((v) => {
            const { markId } = v;
            const shortLink = `${location.origin}/mind/share?uuid=${markId}`;
            this.$set(v, "shortLink", shortLink);
            this.$set(v, "copySuccess", false);
            this.$set(v, "delVisible", false);
          });
          this.total = total || 0;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    handleClose() {
      this.visible = false;
    },
    // 添加链接
    handleAdd() {
      const { type, orderNo } = this.paramsData;
      if (!orderNo) {
        if (type === "by_bar_code") {
          // this.msgError("请输入条码");
          this.$message.error($i18n.t("mind.pleaseEnterTheBarcode"))
        } else {
          // this.msgError("请输入批次");
          this.$message.error($i18n.t("mind.pleaseEnterTheBatch"))
        }
        return;
      }
      this.addEditTitle = "添加链接";
      this.addEditVisible = true;
      this.form = {};
      this.resetForm("form");
      this.$set(this.form, "validType", "0");
    },
    // 复制链接
    handleCopy(row) {
      const { shortLink, extractedCode, validType } = row;
      const str =
        validType !== "0"
          ? `链接: ${shortLink} 提取码: ${extractedCode}`
          : `${shortLink}`;
      copyToClip(str);
      row.copySuccess = true;
      setTimeout(() => {
        row.copySuccess = false;
      }, 1000);
    },
    // 操作
    handleEdit(row) {
      this.addEditTitle = "编辑链接";
      this.addEditVisible = true;
      this.form = {};
      this.resetForm("form");
      const { id, validType, dueDate } = row;
      this.form = { id, validType, dueDate };
    },
    handleAddEditCancel() {
      this.addEditVisible = false;
    },
    handleAddEditave() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.saveLoading = true;
          if (typeof this.form.id !== "undefined") {
            API.edit(this.form)
              .then((res) => {
                  // this.msgSuccess("编辑成功");
                  this.$message.success($i18n.t("common.editSuccess2"))
                  this.addEditVisible = false;
                  this.getList();

              })
              .finally(() => {
                this.saveLoading = false;
              });
          } else {
            API.add({ ...this.form, ...this.paramsData })
              .then((res) => {
                const { code } = res;
                  // this.msgSuccess("新智成功");
                  this.$message.success($i18n.t("common.addSuccess"))
                  this.addEditVisible = false;
                  this.getList();

              })
              .finally(() => {
                this.saveLoading = false;
              });
          }
        } else {
          return false;
        }
      });
    },
    // 删除
    handleDel(row) {
      const { id } = row;
      this.delLoading = true;
      API.del(id)
        .then((res) => {
          const { code } = res;
          // if (code === 200) {
            // this.msgSuccess("删除成功");
            this.$message.success($i18n.t("common.deleteSuccess"));
            row.delVisible = false;
            this.getList();
          // }
        })
        .finally(() => {
          this.delLoading = false;
        });
    },
    // 跳转
    jump(url) {
      window.open(url);
    },
  },
};
</script>

<style lang="scss" scoped></style>
